<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小组管理系统">
    <meta name="keywords" content="小组管理系统">
    <title>欢迎光临TFM小组管理系统</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="stylesheet" href="assets/css/indexMedia.css">
</head>

<body style="display: none;">
<!-- banner区域 -start- -->
<div class="banner banner-bg container-fluid animal-left">
    <!-- banner-nav区域  -start--- -->
    <nav class="navbar navbar-expand-lg navbar-style navbar-light shadow animal-top">
        <!-- 商标 -->
        <div class="navbar-brand">
            <a href="#">Fantastic Electricity</a>
        </div>
        <!-- 汉堡按钮 -->
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#toggle">
            <span class="navbar-toggler-icon "></span>
        </button>
        <!-- 导航列表 -->
        <div class="navbar-collapse collapse justify-content-end nav-collapse-style" id="toggle">
            <ul class="navbar-nav">
                <li class="nav-item nav-list-style ">
                    <a href="#" class="nav-link color-gray">首页</a>
                </li>
                <li class="nav-item nav-list-style">
                    <a href="#" class="nav-link color-gray" id="introducebtn">产品介绍</a>
                </li>
                <li class="nav-item nav-list-style">
                    <a href="#register-modal" class="nav-link color-gray" data-bs-toggle="modal">立即注册</a>
                </li>
                <li class="nav-item nav-list-style">
                    <a href="#" class="nav-link color-gray">关于</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- banner-nav区域  -end--- -->
    <!-- 主体区域 -start- -->
    <div class="container-fluid h-100">
        <div class="row h-100">
            <!-- 左边文字区域 -->
            <div class="col-lg-6 h-100 left-text-area animal-left">
                <h1 class="display-3 text-light">
                    Fantastic Electricity
                </h1>
                <h3 class="display-4 text-light">
                    小组管理系统
                </h3>
            </div>
            <!-- 右边表单区域 -->
            <div class="col-lg-6 h-100 col-12 right-form-area">
                <div class="form-area animal-top color-gray">
                    <h2 class="mb-5">登入</h2>
                    <form action="#" method="POST" id="userEntry">
                        <fieldset class="form-floating">
                            <input type="text" class="form-control mb-3" name="account" placeholder="用户名"
                                   id="entry-username">
                            <label for="entry-username">用户名</label>
                        </fieldset>
                        <fieldset class="form-floating">
                            <input type="password" class="form-control mb-3" name="password" placeholder="密码"
                                   id="entry-password">
                            <label for="entry-password">密码</label>
                            <p class="form-text">还没有账户？立刻<a href="#register-modal" data-bs-toggle="modal">创建一个</a>
                            </p>
                            <p class="form-text">
                                <input type="checkbox" required>
                                我已阅读并同意<a href="#">《TFM小组用户服务条款》</a>
                            </p>
                        </fieldset>
                        <button class="btn btn-primary w-100" id="entryBtn" type="submit">登录</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- 主体区域 -end- -->
<!-- banner区域 -end- -->
<div class="product-introduce" id="tz">
    <div class="container">
        <div class="text-center animal-left mt-5">
            <h1 class="color-yellow fs-1 fw-bolder">TFM小组管理系统</h1>
            <p class="color-yellow fs-2 fw-bolder">更多人的选择</p>
        </div>
        <div class="row my-5 justify-content-evenly">
            <div class="col-lg-4 mt-3">
                <div class="card animal-top mx-5 shadow-lg border border-info">
                    <div class="card-img-top">
                        <img src="assets/images/pc01.png" class="w-100 ">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">某大三学生阿伟</h5>
                        <p class="card-text color-gray">阿伟马上毕业面临着找工作的问题，通过该产品他找到了同样在准备校招的一群好伙伴，一起探讨问题，一起分享资料。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mt-3">
                <div class="card animal-top mx-5 shadow-lg border border-info">
                    <div class="card-img-top ">
                        <img src="assets/images/pc02.png" class="w-100">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">某普通大学生杰哥</h5>
                        <p class="card-text  color-gray">今年大一，通过该产品结实到了一群有共同目标的朋友们一起探讨大学生活与将来。</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mt-3">
                <div class="card animal-top mx-5 shadow-lg border border-info">
                    <div class="card-img-top">
                        <img src="assets/images/pc03.png" class="w-100">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">某研究生彬彬</h5>
                        <p class="card-text  color-gray">彬彬创建了自己的讨论小组，作为组长他主导组员们谈论各种学术问题，在他的带领下，组员们都走向了人生巅峰</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="feature">
    <div class="container w-100 h-100">
        <h2 class="text-center animal-left mt-5 color-yellow fs-1 fw-bolder">我们的特色</h2>
        <div class="row d-flex justify-content-center align-items-center w-100 h-100">
            <img src="assets/images/null01.png" class="animal-top w-75">
        </div>

    </div>
</div>
<div class="ourfunction">
    <div class="container w-100 h-100">
        <h2 class="text-center animal-left mt-5 color-yellow fs-1 fw-bolder">我们的功能</h2>
        <div class=" row d-flex justify-content-center align-items-center w-100 h-100">
            <img src="assets/images/null02.png" class="animal-top w-75">
        </div>

    </div>
</div>
<footer class="footer"></footer>
<!-- 模态框制作 -->
<div class="modal fade color-gray" id="register-modal" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">注册</h2>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-5">
                <div>
                    <div class="form-floating">
                        <input type="text" name="" id="creatUsername" class="form-control requird"
                               placeholder="username">
                        <label for="creatUsername">用户名</label>
                        <p class="form-text">用户名为6~20位的数字和字母的组合</p>
                    </div>
                    <div class="form-floating">
                        <input type="password" name="" id="creatPassword" class="form-control"
                               placeholder="password" required>
                        <label for="creatPassword">密码</label>
                        <p class="form-text">密码为6~20位的数字和字母的组合</p>
                    </div>
                    <div class="form-floating">
                        <input type="password" name="creatPasswordagain" id="creatPasswordAgain"
                               class="form-control" placeholder="password" required>
                        <label for="creatPasswordAgain">确认密码</label>
                        <p class="form-text">此次密码必须与上一次一致</p>
                    </div>
                    <button class="btn btn-primary w-100 mt-3" type="submit" id="btn">立即注册</button>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scrollreveal.min.js"></script>
<script src="js/custom-animal.js"></script>
<script src="js/indexFunction.js"></script>
<script src="jquery/registerajax.js"></script>
<script src="jquery/loginajax.js"></script>


</body>

</html>
